<template>
  <div class="container" v-if="weatherData">
    <div v-if="showTips" class="overlay" @click="showTips = false"></div>
    <div class="left">
      <router-link to="/" class="link">
        <div class="logo">
          <el-icon><MostlyCloudy /></el-icon>
        </div>
        <div class="title">新中地天气</div>
      </router-link>
      <div class="area">{{ weatherData.city }}</div>
      <div class="weather">实时天气: {{ weatherData.temperature }} ℃</div>
      <div class="wind">{{ weatherData.winddirection }}风 {{ weatherData.windpower }}级</div>
    </div>
    <div class="right">
      <el-icon @click="showTips = !showTips"><InfoFilled /></el-icon>
      <el-icon @click="handleAdd" v-if="!isHomeRoute"><Plus /></el-icon>
    </div>
    <div class="tips" v-show="showTips">
      <div>关于:</div>
      <div class="mar-b">这个应用可以用来追踪你选择城市的当前天气</div>
      <div>如何使用:</div>
      <div>1.点击搜索框输入你希望追踪的城市,<br>可以追踪到村级,但只能显示相应的区县级的天气信息,哈哈!</div>
      <div>2.在搜索结果中选中一个城市，你将获取当地最新的天气</div>
      <div class="mar-b">3.点击右侧的＋号可以将追踪城市的天气情况保存在首页</div>
      <div>移除城市:</div>
      <div class="mar-b">如果你不想在首页关注某个城市,可以通过底部的按钮删除它</div>
      <div>
        <button @click="showTips = !showTips">关闭</button>
      </div>
    </div>
  </div>
  <div v-else class="container">正在加载数据...</div>
</template>

<script setup>
import { MostlyCloudy, InfoFilled, Plus } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { ref, onMounted, computed } from 'vue'

import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/stores/Weather.js'
const weatherStore = useWeatherStore()
const { weatherData } = storeToRefs(weatherStore)
const { getipWeather, addCity } = useWeatherStore()

const route = useRoute()
const isHomeRoute = computed(() => route.name === 'home')

const showTips = ref(false)

onMounted(async () => {
  await getipWeather()
})

const handleAdd = () => {
  addCity()
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  .left {
    display: flex;
    gap: 15px;
    align-items: center;
    .logo {
      font-size: 24px;
      :hover {
        cursor: pointer;
      }
    }
    .link {
      display: flex;
      gap: 15px;
    }
    .title {
      font-size: 24px;
      font-weight: 500;
      &:hover {
        cursor: pointer;
      }
    }
    .area {
      font-size: 18px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 24px;
    cursor: pointer;
  }
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
  }
  .tips {
    position: absolute;
    top: 200px;
    left: 550px;
    padding: 15px;
    background-color: #fff;
    z-index: 20;
    div {
      color: #333;
      background: #fff;
      font-size: 14px;
    }
    .mar-b {
      margin-bottom: 20px;
    }
    button {
      width: 70px;
      height: 30px;
      border: none;
      cursor: pointer;
    }
  }
}
</style>
